<template>
    <div class="emailCheckPage">
        <div class="content-wrapper" :class="currentData.success && 'on' || ''">
            <div class="title-wrapper">
                <span class="icon" :class="currentData.title && currentData.title.icon">
                    <span class="path1"></span><span class="path2"></span>
                </span>
                <span v-if='currentData.title' class="text">{{currentData.title.text}}</span>
            </div>
            <div v-if="currentData.success" class="success">邮箱验证成功</div>
            <div v-if='currentData.content' class="content-text">{{currentData.content}}</div>
            <div class="btn" @click='btnFn' :class="currentData.success && 'on' || ''">{{currentData.btnText}}</div>
        </div>
       
    </div>
</template>

<script>
import { getToken } from 'plus/auth'
import { emailSend } from "api/getData";
export default{
    name: 'emailCheckPage',
    data(){
        return {
            listData: [
                {
                    title: {
                        icon: 'icon-yanzhenguoqi',
                        text: '该链接已过期'
                    },
                    content: '该验证链接已过期，请点击重新发送邮件按钮验证邮箱！',
                    btnText: '重新发送邮件'
                },
                {
                    title: {
                        icon: 'icon-goumaichenggong',
                        text: ''
                    },
                    success: '邮箱验证成功',
                    content: '',
                    btnText: '返回首页'
                },
                {
                    title: {
                        icon: 'icon-goumaichenggong',
                        text: '验证邮件已成功发送至您的邮箱'
                    },
                    btnText: '立即进入邮箱'
                }
            ],
            currentData: {},
            index: null,
            timer: null,
            bool: false,
            emailUrl: null
        }
    },
    mounted(){
        let listData = this.listData,
        index = this.$route.query.index,
        emailName = this.$route.query.emailName
        if(index == 2){
           listData[2].content = `验证邮件已发送至您的邮箱：${emailName}，您需要点击邮件中的确认链接来完成验证！`
        }
        this.$set(this, 'currentData', listData[index])
        this.$set(this, 'index', index)
        this.$set(this, 'emailUrl', emailName)
    },
    methods: {
        btnFn(){
            let index = this.index
            if(index == 0){  // 过期重新验证
                emailSend(this.emailUrl).then(res => {
                    let emailUrl = this.emailUrl,
                        url = `https://mail.${emailUrl.split('@')[1]}`,
                        tempwindow = window.open('','_self')
                    tempwindow.location.href = url;
                })
                
            } else if(index == 1){
                this.$router.push({ // 验证成功
                    path: '/home'
                })
            } else if(index == 2){ // 刚进来时  80@qq.com
                let emailUrl = this.emailUrl,
                url = `https://mail.${emailUrl.split('@')[1]}`,
                tempwindow = window.open('','_self')
                tempwindow.location.href = url;
            }
        }
    }

}
</script>

<style lang="stylus" scoped>
@import '~style/base.styl';

    .emailCheckPage{
        width: 1200px;
        margin: auto;
        padding-top: 60px;

        .content-wrapper{
            padding-left: 318px;

            .title-wrapper{
                height: 50px;
                line-height: 50px;
                font-size: $font-size-large-xxl;
                font-weight: bold;
                .icon{
                    font-size: 50px;
                    margin-right: 30px;
                    vertical-align: middle;
                }
                .text{
                    vertical-align: middle;    
                }
            }
            
            .content-text{
                margin-top: 60px;
                font-size: $font-size-medium;
                color:  $color-text-mt; 
            }
            .success{
                margin-top: 30px;
                font-size: $font-size-large-xxl;
                font-weight: bold;
            }

            .btn{
                width: 164px;
                height: 44px;
                margin-top: 30px;
                background-color: $color-pay-off;
                line-height: 44px;
                text-align: center;
                color: $color-text;
                font-size: $font-size-large;
                border-radius: 2px;
                cursor: pointer; 
            }
            .btn.on{
                margin: 60px auto 0;
            }
           
            
        }
        .content-wrapper.on{
            padding-left: 0;
            text-align: center;   
        }
    }
</style>

